<template>
  <div class="errorpage" ref="bgstar" id="bgstar"  @click.stop="gotowhere('guide')">
    <div class="dao">
        <van-circle  size="2rem" v-model="currentRate" :rate="rate" :speed="20" :text="text" />
      </div>
      <img :src="image" alt="" class="mimg">
      <span
        v-for="(l,i) in spanNum" 
        :key="i"
        class="spandot"
        :style="{
          left:l.x+'px',
          top:l.y+'px',
          transform:'scale('+l.scaler+')',
          background:l.rgb,
          animationDelay:l.rate + 's'
        }"
      >
      </span>
      
  </div>
</template>


<script>
import image from "@/assets/images/404.png"
export default {
  name:"notfound",
  data(){ 
    return {
      pic:require('@/assets/images/404.png'),
      image,
      spanNum:[],
      currentRate:0,
      text:"5S后跳转",
      rate:100,
    }
  },
  watch:{
    currentRate(v){
      // console.log(v);
      // console.log(v.toFixed(0)/20)
      this.text = 5-parseInt(v.toFixed(0)/20) + "S后跳转";
      if(v==100){
        this.gotowhere("guide")
      }
    }
  },
  methods:{
      spanInit(){
         var maxWidth = this.$refs.bgstar.clientWidth;
         var maxHeight = document.getElementById("bgstar").clientHeight;

         for(var i=0;i<520;i++){
          //  随机位置
           var x = Math.floor(Math.random()* maxWidth) ;
           var y = Math.floor(Math.random()* maxHeight) ;

          //  随机大小
          var scaler = Math.random() * 1.5;

          // 随机频率  S 
          var rate = Math.random() * 2.5 ;  

          // 随机的颜色
          var r = Math.floor(Math.random() * 255 );
          var g = Math.floor(Math.random() * 255 );
          var b = Math.floor(Math.random() * 255 );
          var opc = Math.random() * 1;

          this.spanNum.push({
            x,
            y,
            scaler,
            rate,
            rgba:`rgba(${r},${g},${b},${opc})`,
            rgb:`rgb(${r},${g},${b})`

          })
         }
         console.log(maxWidth,maxHeight)
      }
  },
  mounted(){
    this.spanInit();
  }
}
</script>

<style lang="scss" scoped >
.errorpage{
  width:100%;
  height:100%;
  background: #000;
  position: relative;
   .van-circle{
    ::v-deep .van-circle__text{
      color:#fff;
    }
  }
  .mimg{
    width:260px;
    height:280px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
  }
  .dao{
    position: absolute;
    z-index: 200;
    right:20px;
    top:20px;
  }
  .spandot{
    position: absolute;
    z-index: 100;
    width: 4px;
    height:4px;
    border-radius: 50%;
    animation: flash 3s infinite alternate;

  }
   @keyframes flash {
        from{
            opacity: 0;
        }
        to{
            opacity: 0.5;
        }
    }
}
</style>
